<template>
  <div class="login-body">
    <div class="marking"></div>
    <div class="container">
      <div class="box">
        <div class="logo">
          <img src="../../assets/img/logo.png" >
        </div>
        <div class="form">
          <div class="item">
            <div class="label">账号</div>
            <span class="icon iconfont icon-yonghuguanli1"></span>
            <Input :value="account" placeholder="请输入账号" @change="_setValue($event, 'account')" />
          </div>
          <div class="item">
            <div class="label">密码</div>
            <span class="icon iconfont icon-027caozuo_jiesuo"></span>
            <InputPassword :value="password" placeholder="请输入密码" type="password" @change="_setValue($event, 'password')"/>
          </div>
          <div class="remember"><Checkbox :checked="remember" @click="_handlerRemember">记住密码</Checkbox></div>
          <div class="login-bottom" @click="_submit" v-if="!loading">
            登录
          </div>
          <div class="login-bottom login-loading" v-else>
            <Spin />
            登录中
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Input,InputPassword, Checkbox, Spin} from "ant-design-vue";
import Socket from "../../utils/Socket";
import {login} from "../../api/account/index";
import {message} from "ant-design-vue";


export default {
    name: 'login',
    data(){
      return{
          account: '',
          password: '',
          loading: false,
          remember: false,
          routeIds: [],
      }
    },
    components:{
        Input,
        InputPassword,
        Checkbox,
        Spin
    },
    mounted() {
        const loginInfo = localStorage.getItem("loginInfo");
        if(loginInfo){
            const item = JSON.parse(loginInfo);
            this.account = item.account;
            this.password = item.password;
            this.remember = true;
        };
      document.getElementsByClassName("login-body")[0].addEventListener("keydown", this._keyUp)
    },
    methods: {

        _keyUp(e){
            if(e.keyCode === 13) {
                this._submit();
            }
        },

        /**
         * 登录
         *
         */
        _submit(){
            this.loading = true;
            this._validate().then(() => {
                login({
                    account: this.account,
                    password: this.password
                }).then(res => {
                    if(!res){
                        this.loading = false;
                        return;
                    }
                    localStorage.setItem('token', res.data.token);
                    this._socketConnection(res.data.userId)
                })
            }).catch(e => {
                this.loading = false;
                message.error(e);
            })
        },

        /**
         * 验证
         *
         */
        _validate(){
          localStorage.removeItem("token");
          return new Promise((resolve, reject) =>{
              if(!this.account){
                  return reject("用户名不能为空");
              }
              if(!this.password){
                  return reject("密码不能为空");
              }
              return resolve();
          })
        },

        /**
         * 建立Socket链接
         */
        _socketConnection(userId){
            localStorage.setItem("userId", userId);
            this.$store.dispatch('socketConnection').then(()=>{
                this._rememberPassword();
                this.loading = false;
                this.$store.dispatch('getMenus').then(()=>{
                    this.$store.dispatch('setRouter').then(()=>{
                        this.$router.push('home')
                    })
                });
            })
            // const socket = new Socket(userId, 1, ()=>{
            //     this._rememberPassword();
            //     this.loading = false;
                
            //     this.$store.dispatch('getMenus').then(()=>{
            //         this.$store.dispatch('setRouter').then(()=>{
            //             this.$router.push('home')
            //         })
            //     });
            // });
            // this.$store.commit('setSocket', 123);           
        },

        /**
         * 设置值
         *
         */
        _setValue(e, key){
            this[key] = e.target.value;
        },

        /**
         * 记住密码
         */
        _rememberPassword(){
            if(this.remember){
                const loginInfo = {
                    account: this.account,
                    password: this.password,
                }
                localStorage.setItem('loginInfo', JSON.stringify(loginInfo));
            }else{
                localStorage.removeItem("loginInfo");
            }
        },

        _handlerRemember(e){
            this.remember = e.target.checked;
        }
    }
}
</script>

<style lang="scss">
@import "./index.scss";
@import "../../iconfont/iconfont.css";
</style>
